<template>
    <div>
        <div class="model-maskc" v-if="showModel">
            <div class="modelbox" >
                <div class="modelbox-header">
                    <div class="title">
                        {{title}}
                    </div>
                    <i class="iconfont icon-guanbi"></i>
                </div>
                <div class="modelbox-content">
                    <mt-radio title="" v-model="value" :options="options">
                    </mt-radio>
                </div>
                <div class="modelbox-footer">
                    <div class="modelbox-footer-leftbtn" @click="leftClick">{{leftName}}</div>
                    <div class="modelbox-footer-rightbtn" @click="rightClick">{{rightName}}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'model',
    props: ['title', 'content', 'leftName', 'rightName', 'showModel'],
    data(){
        return{
            value:'1',
            options: [
                {
                    label: '已提交借款',
                    value: '1'
                },
                {
                    label: '暂时不想申请',
                    value: '2'
                }
            ]
        }
    },
    methods: {
        leftClick() {
            this.$emit('leftClick');
        },
        rightClick() {
            this.$emit('rightClick');
        }
    }
}
</script>
<style lang='scss'>
@import '../scss/variable/base.scss';
.model-maskc {
    width: 100%;
    height:100Vh;
    background: rgba(0,0,0,0.3);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 11;


.modelbox {
    position: absolute;
    left: 50%;
    border-radius: 0.24rem;
    overflow: hidden;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 8.66rem;
    height: 6.75rem;
    &-header {
        width: 100%;
        height: 1.6rem;
        background: #d8fcff;
        line-height: 1.7rem;
        .title{
            font-size: 0.4rem;
            font-weight: bold;
        }
        img{
            width: 3.32rem;
            height: 0.92rem;
            margin-top: 0.4rem;
        }
    }
    &-content {
        height: 4rem;
        background: #fff;
        text-align: left;
        box-sizing: border-box;
        padding-left: 25%;
        padding-top:0.5rem;
        padding-bottom: 0.5rem;
        
        .mint-radio-label{
            font-size: 0.4rem;
        } 
    }
    &-footer {
        &-leftbtn {
            float: left;
            width: 50%;
            height: 1.2rem;
            line-height: 1.1rem;
            background: #f4f4f4;
            font-size: 0.38rem;
            color: #959595;
        }
        &-rightbtn {
            float: right;
            width: 50%;
            height: 1.2rem;
            line-height: 1.1rem;
            background: #30ccdb;
             font-size: 0.38rem;
             color:#fff;
        }
    }
}
}
.mint-radiolist-title{
    margin: 0;
}
.mint-radio-input:checked + .mint-radio-core {
    background-color: $primaryColor !important;
    border-color: $primaryColor !important;
}
</style>

